<%@ page import="com.liuya.common.I18N" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%--<jsp:include page="taglib.jsp"/>--%>
<%@ include file="taglib.jsp"%>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%--<link rel="shortcut icon" href="/style/def/favicon.ico">--%>
    <link rel="shortcut icon" href="../../../style/def/favicon.ico">
    <link rel="stylesheet" type="text/css" media="screen" href="../../../style/def/css/liuya.css" />
    <%--<link rel="stylesheet" type="text/css" media="screen" href="../../../style/def/css/jquery-ui-1.10.3.css"/>--%>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../style/def/css/jquery-ui-1.8.5.custom.css" />
    <%--<link rel="stylesheet" type="text/css" media="screen" href="../../../style/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>--%>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../style/zTree_v3/css/zTreeStyle.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../style/def/css/liuyaTree.css" />

    <script src="../../../style/def/js/jquery-1.9.1.js" type="text/javascript"></script>
    <%--<script src="../../../style/def/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>--%>
    <script src="../../../style/def/js/jquery-ui-1.8.5.custom.js" type="text/javascript"></script>
    <%--<script src="../../../style/zTree_v3/jquery.ztree.all.js" type="text/javascript"></script>--%>
    <script src="../../../style/zTree_v3/jquery.ztree-2.6.js" type="text/javascript"></script>
    <%--<script src="../../../style/def/js/jquery.form.3.51.0.js" type="text/javascript"></script>--%>
    <script src="../../../style/def/js/jquery.form.js" type="text/javascript"></script>
    <%--<script src="../../../style/def/js/jquery.validate.min.js" type="text/javascript"></script>--%>
    <script src="../../../style/def/js/jquery.validate.js" type="text/javascript"></script>
    <script src="../../../style/def/i18n/messages/messages_<%=I18N.getInstance().getCountry()%>.js" type="text/javascript"></script>

    <style type="text/css">
        <%--.ztree li span.button.ico_docu{ background:url('/style/images/${treeType}.gif');}--%>
        .tree li button.ico_docu{ background:url('../../../style/images/${treeType}.gif');}
    </style>

    <title>${pageTitle}</title>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>
<%@include file="menu.jsp" %>

<div class="treeDiv">
    <!-- here is the tree -->
    <%--<ul id="tree" class="ztree"></ul>--%>
    <ul id="tree" class="tree"></ul>
    <!-- tree ends here -->
</div>

<div class="ctxMenuDiv">
    <!-- context menu dialog -->
    <div id="contextMenu"></div>
    <!-- dialog end -->
</div>
<div class="editDiv">
    <!-- edit dialog -->
    <div id="edit"></div>
    <!-- dialog end -->
</div>
<div class="clearDiv"></div>

<%@include file="footer.jsp" %>

<script type="text/javascript">
    var tree;
    var treeType = "${treeType}";
    jQuery(document).ready(function () {
        initTree();
    });

    function initTree() {
        var dragMove = false;
        if(treeType == "privilege"){
            dragMove = true;
        }
        var treeNodes = [];
        var treeSetting={
            async: true,
            editable: true,
            edit_renameBtn: false,
            edit_removeBtn: false,
            dragMove: dragMove, // only privilege tree is draggable
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pId",
            asyncUrl: "loadTree.do?oper=loadTree",
            callback:{
                click: clickTreeNode,
                asyncSuccess: afterTreeLoad,
                beforeDrag:beforeDragTreeNode,
                beforeDrop:beforeDropTreeNode
            },
            asyncParam: ["name", "id","isLeaf"]
        };
        tree = jQuery("#tree").zTree(treeSetting, treeNodes);
//        var treeSetting={
//            edit: {
//                enable: true,
//                showRemoveBtn: false,
//                showRenameBtn: false,
//                drag: {
//                    isMove: dragMove, // only privilege tree is draggable
//                    isCopy: false
//                }
//            },
//            async: {
//                enable: true,
//                dataType: "text",
//                url: "loadTree.do?oper=loadTree",
//                autoParam: ["name", "id", "isLeaf"]
//            },
////            check: {
////                enable: false
////            },
//            data: {
//                simpleData: {
//                    enable: true,
//                    idKey: "id",
//                    pIdKey: "pId"
//                }
//            },
//            callback: {
//                onClick: clickTreeNode,
//                onAsyncSuccess: afterTreeLoad,
//                beforeDrag: beforeDragTreeNode,
//                beforeDrop: beforeDropTreeNode
//            }
//        };
//        tree = $.fn.zTree.init($("#tree"), treeSetting, treeNodes);
    }

    function beforeDragTreeNode(treeId, treeNode) {
        // reserved privilege is not drap and dropable
        if (treeNode.id <= 0) {
            return false;
        } else {
            return true;
        }
    }

    function beforeDropTreeNode(treeId, treeNode, targetNode, moveType) {
        // leaf nodes cann't have any children
        if (targetNode.isLeaf == "1" && moveType == "inner") {
            return false;
        }

        var targetId = targetNode.id;

        var newOrderNum = 0;
        if (moveType != "inner") {
            targetId = targetNode.parentNode.id;
            newOrderNum = tree.getNodeIndex(targetNode);

            if (moveType == "after" && treeNode.parentNode.id != targetNode.parentNode.id) {
                newOrderNum = newOrderNum + 1;
            }
        }

        jQuery.ajax({
            type: "Post",
            url: "move.do?oper=move",
            data: {"id": "n" + treeNode.id, "parentId": "n" + targetId, "position": newOrderNum},
            success: function (data) {
                initTree();
                return true;
            },
            error: function (err) {
                alert(err);
                return false;
            }
        });
    }

    function afterTreeLoad(event, treeId, treeNode, msg) {
        tree.expandAll(true);
    }

    function clickTreeNode(event, treeId, treeNode) {
        var id = treeNode.id;

        // clear div content
        jQuery("#contextMenu").html("");
        jQuery("#edit").html("");

        // load context menu
        jQuery("#contextMenu").load("menu.do?oper=menu&id=n" + id);
    }

    function createNode(pid) {
        // clear div content
        jQuery("#edit").html("");
        jQuery("#edit").load("preCreate.do?oper=preCreate&parentId=n" + pid);
    }

    function beforeCreate(formData, jqForm, options) {
        // TODO check the entity exist or not?
    }

    function afterCreate(responseText, statusText, xhr, jqForm) {
        initTree();
    }

    function deleteNode(id) {
        if (id == 0) {
            alert("Can't delete ROOT node");
            return;
        }

        jQuery("#edit").html("");
        jQuery.ajax({
            url: "delete.do?oper=delete&id=n" + id,
            type: "POST",
            success: function (msg) {
                initTree();
                jQuery("#contextMenu").html("");
                jQuery("#edit").html(msg);
            }
        });
    }

    function modifyNode(id) {
        if (id == 0) {
            alert("Can't modify ROOT node");
            return;
        }

        jQuery("#edit").html("");
        jQuery("#edit").load("preModify.do?oper=preModify&id=n" + id);
    }

    function beforeModify(formData, jqForm, options) {
        // TODO check the entity exist or not?
    }

    function afterModify(responseText, statusText, xhr, jqForm) {
        initTree();

        jQuery("#contextMenu").html("");
        jQuery("#edit").html(<%=I18N.say("UpdatedSuccess")%>);
    }

    function copyNode(id) {
        // clear div content
        jQuery("#edit").html("");
        jQuery("#edit").load("preCopy.do?oper=preCopy&id=n" + id);
    }

    function afterCopy(responseText, statusText, xhr, jqForm) {
        initTree();

        jQuery("#contextMenu").html("");
        jQuery("#edit").html(<%=I18N.say("CopySuccess")%>);
    }
</script>
</body>
</html>